<template>
    <div class="indexpage">
        <div class="topbar">
            <nut-navbar @on-click-back="back" @on-click-title="title" title="书籍详情">
                <template #left>
                <div>返回</div>
                </template>
                <template #right>
                    <StarFill2 color="#ffaf40" v-show="addbook" @click="TextToast"  />
                    <StarN v-show="!addbook"  @click="TextToast"  />
                </template>
            </nut-navbar>
        </div>
        

        <!-- 页面详情组件 -->
        <covers :cover="cover" />
        <p>{{fictionType}}</p>
        <h3>{{title}}</h3>
        <p>
            <nut-cell class="cell" style="width: 220px; margin: 20px auto;">
                <nut-rate allow-half v-model="valueStar" active-color="#FFC800"/> &nbsp;&nbsp;{{valueStar}}/5.0
            </nut-cell>
        </p>
        <p class="descs">
            <nut-ellipsis 
            direction="end" 
            expandText="展开" 
            collapseText="收起"
            :content="descs" rows="3" ></nut-ellipsis>
            <!-- {{descs}} -->
        </p>
        <p class="taglist">      
                <nut-tag class="nut_tag" round type="primary" v-for="(item,index) in taglist">{{item}}</nut-tag>
        </p>
        <!-- {{taglist}} -->
        <nut-button color="#7232dd" style="width: 85vw; height: 5vh;margin: 12vh 7.5vw;">点击开始阅读/(免费)</nut-button>
    </div>
</template>

<script setup>
import { StarFill2 ,StarN } from '@nutui/icons-vue';
import { bookdirectory } from '../../api/index'
import { ref, reactive } from 'vue'
import covers from '../../components/cover.vue'
import { Segment, useDefault } from 'segmentit';
let cover = ref(null)
let fictionType = ref('类型文本加载中')
let title = ref('标题文本加载中')
const valueStar = ref(3.5)
let descs = reactive('描述文本加载中')
let taglist = reactive([])
bookdirectory('e8bc8dd5-8877-3da6-ac96-3ede6ed61834').then((res) => {
    console.log(res);
    cover.value = res.data.data.cover
    fictionType.value = res.data.data.fictionType
    title.value = res.data.data.title
    descs = res.data.data.descs
    taglist = tagget(descs)
}).catch((err) => {
    console.log(err);
})
// tag 文本分词函数
function tagget(descs) {
    let taglist = []
    const segmentit = useDefault(new Segment());
    console.log(descs);
    const result = segmentit.doSegment(descs);
    let arr = []

    // 将需要排序的 key, 按照 "从小到大" 进行排列
    let sortKeys = result.sort((a, b) => {
    return a.p - b.p
    })

    // 循环排列好的 key, 重新组成一个新的数组
    for (var sortIndex in sortKeys) {
        // console.log(sortKeys[sortIndex]["w"].length);
    if (sortKeys[sortIndex]["w"].length>=2 && sortKeys[sortIndex]["w"].length<5) {
        arr.push(sortKeys[sortIndex]["w"])
        }
    }
    for (let i = 0; i < 4; i++) {
        taglist[i]= arr[arr.length-i] == undefined?arr[arr.length-i-4]:arr[arr.length-i]
    }
    return taglist
}
let addbook = ref(false)
function TextToast() {
    addbook.value = !addbook.value
    if (!addbook) {
        console.log(addbook);
    } else { 
      console.log(addbook);
    }    
}



</script>

<style scoped>
 p{
    text-align: center;
    font-size: 17px;
    color: rgb(203, 180, 180);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 600;
 }
 h3{
    text-align: center;
    line-height: 50px;
 }
 .descs{
    width: 86vw;
    /* height: 90px; */
    font-size: 14px;
    line-height: 30px;
    /* overflow: hidden; */
    text-overflow: ellipsis;
    display: -webkit-box;
    /* -webkit-line-clamp: 3; */
    -webkit-box-orient: vertical;
    margin: 20px auto;
    text-indent: 2em;
 }
 .nut_tag{
    margin: 0 10px;
 }
 .topbar{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
 }
</style>